<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画小熊动态图</title>
    <style>
        /* 原理 小熊是一张 静态的八个动作的静图，让动起来的原因  使用一个盒子 在小熊图上来回无限移动 小熊看着就是跑起来的样子 */
        body {
            background-color: #ccc;
        }

        div {
            /* 定义  小熊一个动作的宽和高 */
            width: 200px;
            height: 100px;
            background: url('../image/bear.png') no-repeat;
            /* 小熊从左边跑到中间 利用定位去做 相当于水平居中 */
            position: absolute;
            top: 0;
            left: 0;
            /* 调用动画  小熊有八个动作 分八步走比较更加流畅*/
            /* 元素可以调用多个动画 动画与动画之间用动画隔开  如果分开写的话会把上面的动画给替换掉*/
            animation: bear 1s steps(8) infinite,move 4s linear forwards;

        }

        /* 定义动画 */
        @keyframes bear {
            0% {
                /* 小熊做的是背景图利用 background-postion 来移动盒子 向左移动 x轴是负值 */
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0%{
              
            }
            100%{
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const ress = new Map();
        var printinfoArr = data.filter(function (currentValue, index, arrs) {
            if (ress.has(currentValue.Json.tel)) {
                for (var i = 0; i < arrs.length; i++) {
                    var obj = arrs[i].Json;
                    if (obj.tel === currentValue.Json.tel) {// 对象里的唯一标识tel
                        arrs[i] = obj;
                        break;
                    }
                }
                return false;
            } else {
                ress.set(currentValue.Json.tel, 1);
                return true;
            }
        });
    </script>
</body>

</html>